<template>
  <div>
    <div class="banner" @click="showOrHideGallary(true)">
      <img class="banner-img" :src="bannerImgUrl" alt="景点图" />
      <div class="banner-intro">
        <span class="spot-name" v-text="bannerName"></span>
        <span class="spot-num">
          <i class="iconfont icon">&#xe60a;</i>
          {{ gallaryList.length }}
        </span>
      </div>
    </div>
    <fade>
      <cpt-gallary
        :imgList="gallaryList"
        v-show="showGallary"
        @close="showOrHideGallary(false)"
      ></cpt-gallary>
    </fade>
  </div>
</template>

<script>
import CptGallary from '@cpt/gallary/Gallary'
import Fade from '@cpt/fade/Fade'
export default {
  name: 'DetailBanner',
  components: {
    CptGallary,
    Fade
  },
  props: {
    detailBannerData: {
      required: true,
      type: [Object]
    }
  },
  data () {
    return {
      showGallary: false
    }
  },
  computed: {
    bannerImgUrl: function () {
      return (
        this.detailBannerData.bannerImg ||
        'http://a.hiphotos.baidu.com/image/pic/item/838ba61ea8d3fd1fc9c7b6853a4e251f94ca5f46.jpg'
      )
    },
    bannerName () {
      return this.detailBannerData.sightName || ''
    },
    gallaryList () {
      return this.detailBannerData.gallaryImgList || []
    }
  },
  methods: {
    showOrHideGallary: function (flag) {
      this.showGallary = flag
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner{
  height 0
  padding-bottom 55%
  overflow hidden
  position relative
  .banner-img{
    display block
    width 100%
  }
  .banner-intro{
    position absolute
    display flex
    width 100%
    bottom 0
    line-height 0.6rem
    font-size 0.32rem
    background -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%)
    background -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)
    background linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%)
    color #fff
    .spot-name{
      flex 1
      padding 0 0.2rem
    }
    .spot-num{
      display block
      margin-top 0.09rem
      margin-right 0.1rem
      padding 0.05rem 0.4rem
      height 0.32rem
      line-height 0.32rem
      border-radius .2rem
      font-size .24rem
      background rgba(0,0,0,0.8)
    }
    .icon{
       font-size .24rem
       margin-right 0.05rem
    }
  }
}
</style>
